import { useState, useRef } from 'react'
import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs'
export const User = ({ user, onPulih }) => {
    let [context, setContext] = useState('')

    let inputRef = useRef()
    let pulih = () => {

        onPulih({
            rpid: uuidV4(),
            user,
            content: context.trim(),
            ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分,
            like: 66,
        },)
        setContext('')
        inputRef.current.focus()
    }
    return (<div className="box-normal">

        {/* 当前用户头像 */}
        <div className="reply-box-avatar">

            <div className="bili-avatar">
                <img className="bili-avatar-img" src={user.avatar} alt={user.uname} />

            </div>
        </div>
        <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
                value={context}
                className="reply-box-textarea"
                placeholder="发一条友善的评论"
                ref={inputRef}
                onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                        pulih()

                    }
                }
                }
                onChange={(e) => setContext(e.target.value)}
            />
            {/* 发布按钮 */}
            <div className="reply-box-send" onClick={pulih}>
                <div className="send-text" >发布</div>

            </div>
        </div>
    </div>)

}